<template>
  <div class="clear-cache-section">
    <div class="section-header">
      <h3>清除缓存</h3>
      <p class="description">清除本地缓存数据，释放存储空间</p>
    </div>
    <div class="clear-cache-content">
      <el-button 
        type="primary" 
        plain 
        @click="showConfirmDialog"
        class="clear-cache-btn"
      >
        清除缓存
      </el-button>
    </div>

    <!-- 确认弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="确认清除缓存"
      width="30%"
      :show-close="false"
      class="custom-dialog"
    >
      <span>确定要清除所有缓存数据吗？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleClearCache">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)

const showConfirmDialog = () => {
  dialogVisible.value = true
}

const handleClearCache = () => {
  // 这里可以添加实际的清除缓存逻辑
  ElMessage.success('缓存清除成功')
  dialogVisible.value = false
  // 刷新当前页面
  window.location.reload()
}
</script>

<style scoped>
.clear-cache-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.section-header {
  margin-bottom: 20px;
}

.section-header h3 {
  font-size: 18px;
  color: #333;
  margin: 0 0 8px 0;
}

.description {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.clear-cache-content {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.clear-cache-btn {
  min-width: 120px;
}

.custom-dialog :deep(.el-dialog__body) {
  padding: 20px;
  text-align: center;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
}
</style> 